<template>
    <div class="app-container">
        <part-comp title="审核详情" showback class="mb_15"/>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="whitebg detailbox flex">
                    <div class="leftimg">
                        <img src="@/assets/images/avatar.png" alt="">
                    </div>
                    <div class="itemcontent">
                        <div class="username">用户名</div>
                        <div class="checkitem flex">
                            <span>审核状态：待审核</span>
                            <span class="mltime">提交时间：2022-08-03 15:29</span>
                        </div>
                        <div class="remark overflowtext">备注:</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="whitebg detailbox flex">
                    <div class="leftimg">
                        <img src="@/assets/images/check.png" alt="">
                    </div>
                    <div class="itemcontent">
                        <div class="username">审批人员</div>
                        <div class="checkitem flex">
                            <span>提交时间：2022-08-03 15:29</span>
                        </div>
                        <div class="remark overflowtext">审核详情：</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="whitebg mt_15">
            <div class="boxtitle"><span class="line"></span>审核明细</div>
            <el-table v-loading="listLoading"
                :data="list"
                class="whitetable">
                <!-- <el-table-column label="序号" prop="id" >
                    <template slot-scope="scope">
                        <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="用户名" prop="user_login" >
                    <template slot-scope="scope">
                        <span class="">{{scope.row.gzh}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="公众号" prop="user_login" >
                    <template slot-scope="scope">
                        <span class="">{{scope.row.gzh}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="地区">
                    <template slot-scope="scope">
                        <span >{{ scope.row.province?scope.row.province:'-' }}{{ scope.row.city?'-'+scope.row.city:''}}{{ scope.row.area?'-'+scope.row.area:'' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="地区级别">
                    <template slot-scope="scope">
                        <span v-if="scope.row.his_saleObj">{{levelName(scope.row.active_level)||'-'}}</span>
                        <span v-else>{{levelName(scope.row.active_level)||'-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="标题">
                    <template slot-scope="scope">
                        <span >{{ scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="原始链接">
                    <template slot-scope="scope">
                        <a class="comm_link" :href="scope.row.url" target="_blank">点击跳转</a>
                    </template>
                </el-table-column>
                <el-table-column label="活动链接">
                    <template slot-scope="scope">
                        <a class="comm_link" :href="scope.row.url" target="_blank">点击跳转</a>
                    </template>
                </el-table-column>
                <el-table-column label="活动时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="活动提醒时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="拉取时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="活动类型">
                    <template slot-scope="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                <template slot-scope="scope">
                    <div v-if="scope.row.user_status==1" ><span class="primarydot"></span>正常</div>
                    <div v-else><span class="primarydot reddot"></span>禁用</div>
                </template>
            </el-table-column>
                <el-table-column label="活动票数">
                    <template slot-scope="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="主办方">
                    <template slot-scope="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="活动联系人">
                    <template slot-scope="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="联系方式">
                    <template slot-scope="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="操作"  fixed="right" width="100">
                    <template slot-scope="scope">
                        <div class="flex btnflex">
                            <div class="commhover btn_textblue mb_10" @click="handleEdit(scope.row)">编辑</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.num"
                @pagination="getList"
                />
        </div>
        <div class="whitebg mt_15">
            <div class="boxtitle"><span class="line"></span>审核详情</div>
            <el-form :model="form" ref="reForm" label-width="80px" label-position="top" class="p_20">
                <el-form-item label="审核意见:" prop="remark">
                    <el-input v-model="form.remark" type="textarea" rows="5" placeholder="审核意见" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">再次提交</el-button>
                    <el-button>取 消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import PartComp from '@/components/PartComp';
export default {
    components:{
        PartComp
    },
    data(){
        return {
            list:[],
            listLoading:false,
            total:0,
            queryParams:{
                page:1,
                num:10
            },

            form:{
                remark:''
            }
        }
    },

    created(){
        this.getList();
    },

    methods:{
        getList(){

        },

        onSubmit(){

        }
    }
}
</script>

<style lang="scss" scoped>
.detailbox{
    width: 100%;
    padding: 15px 30px 10px;
}
.leftimg{
    width: 60px;
    height: 60px;

    img{
        width: 100%;
        height: 100%;
    }
}
.itemcontent{
    width: calc(100% - 60px);
    margin-left: 25px;
    &>div{
        margin-bottom: 5px;
    }

    .username{
        font-size: 16px;
        font-weight: 500;
    }

    .checkitem,.remark{
        width: 100%;
        color: #8E8E8E;
        font-size: 14px;
    }
    .mltime{
        display: inline-block;
        margin-left: 6%;
    }
}
.boxtitle{
    color: #2F86FD;
    font-weight: 500;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    .line{
        display: inline-block;
        width: 3px;
        height: 12px;
        background: #2F86FD;
        margin-right: 10px;
    }
}
</style>